<template>
  <div class='detail bc-gray'>
    <div class="head bc-white">
      <div class="info">
        <img :src="info.wx_pic||info.photo||defaultImg" alt="">
        <p><span>姓名：<span class="color-gray">{{info.name}}</span></span><span>班级：<span class="color-gray">{{info.class}}</span></span></p>
      </div>
      <p class="rate"><span>未签到数/总人数：<span class="color-red">{{info.not_signin_num}}</span>/{{info.total_num}}</span></p>
      <p class="rate-box">
        <span>出勤率：{{info.rate}}%</span>
        <span>迟到：{{info.late_num}}</span>
        <span>请假：{{info.leave_num}}</span>
        <span>旷到：{{info.not_signin_num}}</span>
      </p>
    </div>
    <div class="tags bc-white">
      <span v-for="(item, index) in tagsData" :key="index" :class="{checked:item.checked}" @click="changeTag(item,index)">{{item.label}}</span>
    </div>
    <List class="sign-detail" :listData="listData" @forMore="getMoreInfo">
      <ul class="detail-list bc-white">
        <li v-for="(item, index) in listData" :key="index">
          <img :src="item.category | formaltImg" alt="">
          <div class="content">
            <p><span>{{item.category_name}}</span></p>
            <p><span>时间：</span><span>{{item.start_time}}</span></p>
            <p v-show="item.title"><span>标题：</span><span>{{item.title}}</span></p>
            <p><span>备注：</span><span>{{item.comments}}</span></p>
          </div>
          <div class="operate pr">
            <span :class="'pa active '+'color_'+item.state">{{item.state | formaltState}}</span>
          </div>
        </li>
      </ul>
      <p class="no-data" v-show="listData&&listData.length==0">暂时没有数据</p>
    </List>
  </div>
</template>
<script>
import MixIns from '../../../../../mixin/mixin.js'
import List from '../../../../../components/list.vue'
export default {
  components: {List},
  name: "",
  data() {
    return {
      defaultImg:require("../../../../../assets/images/home/default.jpg"),

      tagsData:[
        {label:"全部",checked:true},
        {label:"签到",checked:false},
        {label:"迟到",checked:false},
        {label:"请假",checked:false},
        {label:"旷到",checked:false}
      ],
      searchInfo:{
        state:0,
        s_number:""
      }
    };
  },
  filters:{
    formaltState(val){
      return ["","签到","迟到","请假","旷到"][val]
    },
    formaltImg(val){
      return require(`@/assets/images/home/signin${val}.png`)
    }
  },
  methods: {
    changeState(item){
      this.stuInfo=item
      this.$store.state.dias.acheet.columns=["签到","迟到","请假","旷到"]
      this.$store.state.dias.acheet.show=true
      this.$store.state.dias.acheet.confirm=this.sureConfirm
    },
    sureConfirm(val){
      var params={
        id:this.searchInfo.id,
        s_number:this.stuInfo.number,
        state:["签到","迟到","请假","旷到"].indexOf(val)-0+1
      }
      _g.apiPost("Attendance/studentSignin",params).then(res=>{
        _g.toMessage(res)
        this.$store.state.dias.acheet.show=false
        this.getListData()
      })
    },
    changeTag(item,index){
      this.tagsData.forEach(ele=>ele.checked=false)
      this.$set(item,"checked",true)
      this.searchInfo.state=index
      this.listData=[]
      this.getListData()
    },
  },
  created() {
    this.searchInfo.s_number=sessionStorage.getItem("detailId")
  },
  mixins:[MixIns]
};
</script>
<style lang="scss" scoped>
.detail {
  height: 100%;
  .head{
    padding: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;

    .name{
      font-size: 16px;
    }

    .rate-box{
      display: flex;
      justify-content: space-between;
      width: 90%;
    }
  }

  .tags{
    margin-top: 20px;
    height: 100px;
    padding: 0 20px;
    box-sizing: border-box;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    display: flex;

    span{
      border: 1px solid #ddd;
      line-height: 55px;
      height: 50px;
      margin-top: 20px;
      margin-right: 20px;
      font-size: 14px;
      padding: 0 20px;
      text-align: center;
      border-radius: 20px;
      color: #999;
    }
    span.checked{
      color: #00998d;
      border-color: #00998d
    }
  }
  .title{
    font-size: 16px;
    height: 80px;
    line-height: 80px;
    padding: 0 20px;
    font-size: 16px;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
    
    >span{
      font-size: 12px;
      color: #999;
    }
    >span:before{
      content:"*";
      color: red;
    }
  }
  .detail-list{
    max-height: calc(100% - 280px);
    overflow: auto;
    li{
      display: flex;
      padding: 10px 20px;
      box-sizing: border-box;
      border-bottom: 1px solid #ddd;

      img{
        width: 120px;
        height: 120px;
        border-radius: 50%;
        margin-right: 20px;
      }

      .content{
        font-size: 13px;

        span:nth-of-type(2){
          color: #999
        }
      }
      .operate{
        margin-left: auto;

        >span{
          width: 80px;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          color: red;
        }
        >span:active{
          background-color: transparent;
        }
        .color_1{
          color: green
        }
        .color_2{
          color: #ffab34;
        }
        .color_3{
          color: #5c76fc;
        }
        .color_4{
          color: #ff3d3d;
        }
      }
    }
  }
  .sign-detail{
    height: calc(100% - 340px)!important;
  }

  .color-gray{
    font-size: 14px;
    color: #999;
  }
  .info{
    display: flex;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
    font-size: 13px;
    height: 140px;
    img{
      width: 120px;
      height: 120px;
      border-radius: 50%;
      margin-right: 20px;
      box-shadow: 1px 1px 3px 1px #333;
    }
    p{
      display: flex;
      flex-direction: column;
      span{
        margin-top: 10px;
      }
    }
  }
  .rate{
    margin-top: 10px;
  }
}
</style>